<template>
	<view>
		<!-- 轮播图 -->
		<swiper-banner :swipers="swipers" height="900" bool="true"></swiper-banner>
		<!-- 基本信息 -->
		<base-info :detail="detail" :pprice="getGoodsCheckedPrice"></base-info>
		<!-- 滚动属性 -->
		<scroll-attrs :attrs="goodsAttrs"></scroll-attrs>
		<!-- 选择弹窗 -->
		<view class="pop">
			<view class="popup d-flex a-center">
				<view class="list">
					<view class="choosed my-1" @click="popup('attr1')">
						<text>已选:</text>
						<text>{{getGoodsChecked}}</text>
					</view>
					<view class="run my-2" @click="popup('attr2')">
						<text>配送:</text>
						<text>北京 东城区 现配</text>
					</view>
					<view class="d-flex a-center  my-1" @click="popup('attr3')">
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							小米自营
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							小米发货
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							七天无理由退货
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup1" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-height">
				<view class="content">
					<view class="body">
						<view class="d-flex a-center poptop">
							<image src="../../static/images/demo/demo6.jpg" class="m-2"></image>
							<view>
								<p-price>
									<template #newPrice>
										<text class="pprice">￥<text>{{getGoodsCheckedPrice}}</text></text>
									</template>
								</p-price>
								<view class="skus my-2">
									{{getGoodsChecked}}
								</view>
							</view>
						</view>
						<view class="number">
							<one-adv v-for="(select,index) in selects" :key="index" :title="select.title">
								<color-tag v-for="(item,c) in select.list" :key="c" :color="false" :item="item"
									:bool="select.selected==c" @click.native="changeIndex(index,c)"></color-tag>
							</one-adv>
						</view>
						<view class="number d-flex j-sb">
							<text class="tit">
								购买数量:
							</text>
							<uni-number-box :min="1" :max="maxStock" v-model="stockval"></uni-number-box>
						</view>
						<view class="go-cart" v-if="maxStock>0">
							加入购物车
						</view>
						<view class="go-cart stock-bg-color" v-else>
							暂无库存
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-height">
				<view class="content">
					<view class="body py-2">
						<uni-swipe-action ref="unaction">
									<uni-swipe-action-item
									    :right-options="options"
									    @change="change"
									    @click="onClick(index,$event)"
										v-for="(item,index) in list"
										:key="index"
									>
										<view class="content-box">
											<text class="content-text">{{item.name}}-{{item.province}}{{item.city}}{{item.district}}{{item.address}}</text>
										</view>
									</uni-swipe-action-item>
								</uni-swipe-action>

						<view class="go-cart" @click="goAddress">
							添加新地址
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup3" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-height">
				<view class="content">
					<view class="body text-center py-4">
						七天无理由退货 退货宝
					</view>
				</view>
			</view>
		</uni-popup>
		<u-parse :content="content" @preview="preview" @navigate="navigate"></u-parse>
	</view>
</template>

<script>
	import {
		getDetail
	} from '../../api/index.js'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				id: '',
				swipers: [],
				detail: {},
				goodsAttrs: [],
				stockval: 1,
				content: `<img src="https://i8.mifile.cn/v1/a1/9c3e29dc-151f-75cb-b0a5-c423a5d13926.webp">
								<img src="https://i8.mifile.cn/v1/a1/f442b971-379f-5030-68aa-3b0accb8c2b9.webp">
								<img src="https://i8.mifile.cn/v1/a1/63b700b6-643e-ec18-fdf3-da66b4b4173f.webp">
								<img src="https://i8.mifile.cn/v1/a1/e9dbf276-193e-11c4-99a6-3097fde82350.webp">
								<img src="https://i8.mifile.cn/v1/a1/1249d3ee-2990-a2b4-28d9-f719c2417b1f.webp">
								<img src="https://i8.mifile.cn/v1/a1/97c79915-64b2-808c-53b4-4345652a179f.webp">
								<img src="https://i8.mifile.cn/v1/a1/cd0fbe1e-a1b3-a87a-f4a6-6fb08ec54931.webp">`,
				selects: [ //{
					// 		selected: 0,
					// 		title: '颜色',
					// 		list: [{
					// 				id: 1,
					// 				name: '黄色'
					// 			},
					// 			{
					// 				id: 2,
					// 				name: '绿色'
					// 			}
					// 		]
					// 	},
					// 	{
					// 		selected: 0,
					// 		title: '套餐',
					// 		list: [{
					// 				id: 3,
					// 				name: '标配'
					// 			},
					// 			{
					// 				id: 4,
					// 				name: '套餐一'
					// 			}
					// 		]
					// 	}
				],
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		onLoad(e) {
			console.log('e=>', e);
			this.id = e.key
		},
		mounted() {
			this.getdetail()
		},
		computed: {
			...mapState({
				list:state=>state.address.List
			}),
			getGoodsChecked() {
				let checkgoodsname = this.selects.map(item => {
					return item.list[item.selected].name
				})
				console.log('checkgoodsname', checkgoodsname);
				return checkgoodsname.join(',')
			},
			//得到选中的索引
			getGoodsCheckedIndex() {
				let index = -1
				if (this.detail.goodsSkus) {
					index = this.detail.goodsSkus.findIndex(v => {
						return v.skusText == this.getGoodsChecked
					})
					return index;
				} else {
					return index;
				}
			},
			//得到选中的价格
			getGoodsCheckedPrice() {
				let index = this.getGoodsCheckedIndex;
				if (index != -1) {
					return this.detail.goodsSkus[index].pprice;
				} else {
					return this.detail.min_price;
				}
			},
			//最大库存
			maxStock() {
				let index = this.getGoodsCheckedIndex;
				if (index != -1) {
					return this.detail.goodsSkus[index].stock;
				} else {
					return this.detail.stock;
				}
			}
		},
		methods: {
			getdetail() {
				getDetail(this.id).then(res => {
					console.log('res', res);
					this.detail = res.data;
					this.swipers = res.data.goodsBanner;
					this.goodsAttrs = res.data.goodsAttrs
					this.selects = res.data.goodsSkusCard.map((item) => {
						var goodslist = item.goodsSkusCardValue.map(v => {
							return {
								id: v.id,
								name: v.value
							}
						})
						return {
							selected: 0,
							title: item.name,
							list: goodslist
						}
					})
					res.data.goodsSkus.map(item => {
						let arr = []
						for (let index in item.skus) {
							arr.push(item.skus[index].value)
							let skusText = arr.join(',')
							item.skusText = skusText
						}
					})
					console.log('this.selects ', this.selects);
				})
			},
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			},
			popup(attr) {
				if (attr == 'attr1') {
					this.$refs.popup1.open('bottom')
				} else if (attr == 'attr2') {
					this.$refs.popup2.open('bottom')
				} else {
					this.$refs.popup3.open('bottom')
				}
			},
			changeIndex(index, c) {
				this.selects[index].selected = c
			},
			onClick(index,e) {
				console.log('eeee',index,e);
				console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
			    if(e.index==0){//编辑
					uni.navigateTo({
						url:`/pages/address/address?key=${index}`
					})
				}
				this.$refs.unaction.closeAll()
			},
			change(event) {
				console.log('改变事件', event);
			},
			goAddress(){
				uni.navigateTo({
					url:'/pages/address/address'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url("@/components/u-parse/u-parse.css");

	.pop {
		width: 750rpx;
		height: 300rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.popup {
		width: 100%;
		height: 300rpx;
		background-color: #eee;
	}

	.list {
		margin: 0 0 0 20rpx;
	}

	.pop-height {
		height: 900rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.content image {
		width: 198rpx;
		height: 204rpx;
	}

	.list {
		margin: 0 0 0 20rpx;
	}



	.content image {
		width: 198rpx;
		height: 204rpx;
	}

	.go-cart {
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #f70;
		color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.pprice {
		font-size: 20rpx;
		color: #f60;
	}

	.pprice text {
		font-size: 34rpx;
		color: #f60;
		font-weight: 900;
	}

	::v-deep .wxParse {
		margin: 0;
		padding: 0;
		line-height: 0;
	}
	.content-box {
		width:750rpx;
		height:88rpx;
		line-height: 88rpx;
		text-indent: 20rpx;
	}

</style>